<!--
 * @Author: Wang WeiHao
 * @Date: 2024-04-15 14:47:33
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-14 14:34:59
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\jin\jin2.vue
-->
<template>
    <div class="w-100 h-100">
        <div class="w-100 h-10 d-flex justify-content-end"> 
            <lineLabel
    :shapeColor="'#5CE1FF'"
    :text="'总数'"
    >
    </lineLabel>
    <lineLabel
    style="margin-left: 20px;"
    :shapeColor="'#B8EB8F'"
    :text="'剩余数量'"
    >
    </lineLabel>
        </div>
        <div class="w-100 h-90" >
          <!-- <div id="jin1" style="width: 100%; height: 100%"></div> -->
                <Broken_line
            :echartsId="'jin2'"
            :xLabel="xLabel"
            :unit="'%'"
            :showFakeLabel="false"
            :echartsData="echartsBrokenData"
            v-if="echartsBrokenData"
              :colorChoose="['#5CE1FF', '#B8EB8F']"
            :smooth="false"
            ></Broken_line>
        </div>
    </div>
   
</template>

<script setup lang='ts'>
import * as echarts from "echarts";
import lineLabel from '@/components/project/lineLabel.vue';
import { useOptions } from "@/hook/useOptions";

const echartsBrokenData=ref()
let xLabel = useOptions().tenyear()
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
onMounted(() => {
    echartsBrokenData.value=props.echartsData
});
// onBeforeMount(() => {
// echartsBrokenData.value=[
//     {
//         label: "黑臭水体总数",
//         value:[20, 30, 40, 35, 34,20, 30, 40, 35, 34,23,45]
//     },
//     {
//         label: "剩余黑臭水体",
//         value:[10, 20, 35, 34,23,13,20, 30, 10, 25, 16,20]
//     },
// ]

// });
</script>

<style>

</style>